<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽运动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 80px;
            height: 80px;
            background-image: url(img/cc.gif);
            background-size: 100% 100%;
            position: absolute;
        }
    </style>
</head>

<body style="overflow: hidden;">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <script>
        console.log(navigator.userAgent);
        var oBox = document.querySelectorAll('.box');
        for (var i = 0; i < oBox.length; i++) {
            drag(oBox[i]);
        }

        function drag(name) {
            var oBox = name;
            var rt = Math.floor(Math.random() * (800 + 1 - 10) + 10);
            var rl = Math.floor(Math.random() * (1500 + 1 - 10) + 10);
            var r = Math.floor(Math.random() * (700 + 1 - 100) + 100);
            var s = Math.floor(Math.random() * (10 + 1 - 1) + 1);
            oBox.style.left = rl + 'px';
            oBox.style.top = rt + 'px';
            var clientW = document.body.clientWidth || document.documentElement.clientWidth;
            var timer = null,
                index = rl;
            autoDrag();

            function autoDrag() {
                oBox.timer = setInterval(function() {
                    if (index >= clientW) {
                        oBox.style.left = 0;
                    }
                    oBox.style.left = (index += s) + 'px';
                }, r);
            }

            var l = 0,
                t = 0;

            oBox.onmousedown = function(e) {
                oBox.style.zIndex = 99;
                clearInterval(oBox.timer);
                var ev = e || event;
                var disX = ev.clientX - oBox.offsetLeft;
                var disY = ev.clientY - oBox.offsetTop;
                document.onmousemove = function(e) {
                    var ev = e || event;
                    l = ev.clientX - disX;
                    t = ev.clientY - disY;

                    oBox.style.left = l + 'px';
                    oBox.style.top = t + 'px';
                }
                document.onmouseup = function() {
                    index = l;
                    autoDrag();
                    document.onmousemove = document.onmouseup = null;
                }
                ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
            }
        }
    </script>
</body>

</html>